<template>
    <div>
        <van-checkbox-group v-model="tags" shape="square" @change="change">
            <div class="tagsItemBox" v-for="dt in list" :key="dt.group_id">
                <h4>{{dt.group_name}}</h4>
                <div class="tags">
                    <van-checkbox v-for="dt2 in dt.tag" :name="dt2.id" :key="dt2.id">
                        <template #icon="props"></template> <!--去掉选择框-->
                        <span :class="{'selected':tags.indexOf(dt2.id)>-1}">{{dt2.name}}</span>
                    </van-checkbox> 
                </div>
            </div>
        </van-checkbox-group>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getTagList} from '@/api/qy-wechat-api'

const props = defineProps({
    modelValue:'',
})

const emit = defineEmits(['update:modelValue'])

const list = ref([])
const tags = ref([])

onMounted(async ()=>{
    // 腾讯接口直接获取的数据
    const res = await getTagList()
    list.value = res.data.tag_group
})

// const setTag = (item)=>{
//     tags.value.push(item.id)
//     change()
// }

const change = ()=>{
    emit('update:modelValue',tags.value)
}
</script>

<style lang="scss" scoped>
.tagsItemBox{
    padding: 0 20px 0 5px;
    margin: 0 0 25px 0;
    h4{
        font-size: 28px;
        font-weight: bold;
        padding: 0 0 0 15px;
        margin: 0 0 20px 0;
    }
    .tags{
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #f3f1f1;
        padding: 0 0 10px 0;
        span{
            display: inline-block;
            padding: 0 20px;
            border-radius: 4px;
            background-color: #f3f1f1;
            height: 60px;
            line-height: 60px;
            margin: 0 0 15px 15px;
            &.selected{
                background-color: #e3af2f;
                color: #fff;
            }
        }
    }
}
</style>